<script lang="ts" setup>
import {ref} from "vue";

const searchValue = ref('')
const search = () => {
  console.log(searchValue.value)
}
const gotostuList=()=>{
		uni.navigateTo({
			url:'/pages/mytag/stuList'
		})
	}
const tagList = ref([
  {
    id: 1
  },
  {
    id: 2
  },
  {
    id: 3
  }
])
</script>

<template>
  <view class="container">
    <view class="search">
      <up-input
          v-model="searchValue"
          custom-style="background:#fff;"
          fontSize="32rpx"
          placeholder="请输入标签名称关键词查询"
          prefix-icon="search"
          prefix-icon-style="font-size:40rpx;"
          shape="circle"
          @change="search"></up-input>
    </view>

    <view class="list">
      <up-list>
        <up-list-item v-for="item in tagList" :key="item.id">
          <view class="item" @click="gotostuList">
            <up-badge :offset="[0, 0]" :showZero='false' absolute
                      custom-style="background: linear-gradient(132deg, #5BCCFC, #2E6BF8);width:96rpx;height:60rpx;font-size:24rpx;display:felx; justify-content: center;align-items: center"
                      max="99"
                      shape="horn"
                      type="primary"
                      value="99人"></up-badge>
            <up-text size="32rpx" text="自信放光芒" ></up-text>
            <up-text color="#808080" margin="12rpx 0" size="24rpx" text="最近更新日期：2024/4/25"></up-text>
            <up-text color="#808080" size="24rpx" text="男生人数：12    女生人数：12"></up-text>
            <up-divider :dashed="true" custom-style="width:100%" lineColor="#808080"></up-divider>
            <up-text color="#808080" margin="12rpx 0" size="24rpx" text="标签ID：202303235456789"></up-text>
          </view>
        </up-list-item>
      </up-list>
    </view>
  </view>
</template>


<style lang="scss" scoped>
.container {

  background-color: #F3F5F9;
  padding: 30rpx;

  .search {
    display: flex;
  }

  .list {
    margin-top: 30rpx;

    .item {
      padding: 30rpx 20rpx;
      width: 686rpx;
      height: 326rpx;
      background: #FFFFFF;
      box-shadow: 0 6rpx 12rpx 0 #dae4f080;
      border-radius: 24rpx;
      filter: blur(0);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      margin: 30rpx auto;
    }
  }
}
</style>
